<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="myMatch-item w100 flex" @click="toMatch()">
		<image :src="matchInfo.imageList[0]" class="item-img" mode="aspectFill"></image>
		<view class="item-info">
			<text class="name flex">{{matchInfo.name}}</text>
			<view class="addres-box flex-row-center">
				<up-icon name="map-fill" color="#A5A6A7" size="28rpx"></up-icon>
				<text class="text">{{matchInfo.address}}</text>
			</view>
			<view class="time-box flex-row-center">
				<up-icon name="clock-fill" color="#A5A6A7" size="28rpx"></up-icon>
				<text class="text">{{matchInfo.start_time}}</text>
			</view>
			<view class="item-footer flex-row-center">
				<template>
					<text class="text" v-if="matchInfo.pay_state==2">已取消</text>
					<text class="text" v-else-if="matchInfo.isEnd==1">已结束</text>
					<view class="close-btn flex-center" v-else @click.stop="closeSign">
						<text class="text">取消报名</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['closeSign']);
	const props = defineProps({
		matchInfo: {
			default: {}
		}
	});
	const matchInfo = computed(() => props.matchInfo);
	const closeSign = () => { //取消比赛
		uni.showModal({
			title: '提示',
			content: '确定取消当前报名赛事？',
			success: async (res) => {
				if (res.confirm) {
					cancelMatch();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	};
	const cancelMatch = async () => {
		const res = await $Api.match.cancelMatch({
			id: matchInfo.value.m_id
		}, true);
		if (res.code === 1) {
			uni.showToast({
				title: '取消成功！'
			});
			matchInfo.value.pay_state = 2;
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const toMatch = () => {
		uni.navigateTo({
			url: '/page_activity/views/activityDetails?id=' + matchInfo.value.m_id
		})
	}
</script>

<style scoped lang="scss">
	.myMatch-item {
		background-color: #222528;
		border-radius: 20rpx;
		padding: 20rpx;

		.item-img {
			width: 160rpx;
			height: 160rpx;
			background: #D9D9D9;
			border-radius: 16rpx;
			flex-shrink: 0;
		}

		.item-info {
			flex: 1;
			height: 100%;
			flex-direction: column;
			margin-left: 18rpx;

			.name {
				display: block;
				width: 320rpx;
				color: $name-color;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				line-height: 48rpx;
				font-weight: bold;
				font-size: 34rpx;

			}

			.addres-box {
				margin-top: 18rpx;

				.text {
					color: $description-color;
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}

			.time-box {
				margin-top: 12rpx;

				.text {
					color: $description-color;
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}

			.item-footer {
				justify-content: flex-end;
				margin-top: 16rpx;

				.text {
					font-size: 26rpx;
					color: #66807D;
				}

				.close-btn {
					height: 48rpx;
					border: 2rpx solid #66807D;
					border-radius: 24rpx;
					padding: 0 18rpx;


				}
			}
		}
	}
</style>